<style lang="less" scoped>
#map1 {
  width: 100%;
  height: 400px;
}
</style>

<template>
  <div>
    <Card class="msg_card">
      <p slot="title" class="change4">最新消息</p>
      <div class="Msg-group">
        <div
          v-for="item in msglist"
          class="msg_list"
          :key="item._id"
          @click="showMsg(item)"
        >
          <Icon
            class="pull-right iconRight"
            style="color: #3ac0ff"
            type="md-arrow-forward"
          ></Icon>
          <p>{{ item.msg }}</p>
          <span style="width: 200px; border-right: 1px solid #08235f"
            >发送人：{{ item.location.dep_name }}</span
          >
          <span style="margin-left: 15px">时间：{{ item.date_time }}</span>
        </div>
      </div>
    </Card>
    <Modal v-model="msgModal" title="查看事件" width="1000">
      <Form :model="moduleItem" :label-width="100">
        <Form-item label="事件" prop="msg">
          <Input v-model="moduleItem.msg" readonly></Input>
        </Form-item>
        <Form-item label="发送人" prop="dep_name">
          <Input v-model="moduleItem.dep_name" readonly></Input>
        </Form-item>
        <Form-item label="时间" prop="date_time">
          <Input v-model="moduleItem.date_time" readonly></Input>
        </Form-item>
        <Form-item label="事件处理过程" v-if="!patrol" prop="date_time">
          <Table
            ref="table"
            :data="jinduData"
            :columns="jinduColumns"
            stripe
          ></Table>
        </Form-item>
        <Form-item label="事件处理时间轴" v-if="!patrol" prop="time_line">
          <Timeline>
            <TimelineItem v-for="(v, index) in jinduData" :key="index">
              <p style="font-size: 14px; font-weight: bold">
                {{ v.date_time }}
              </p>
              <p style="padding-left: 5px">{{ v.overview }}</p>
            </TimelineItem>
          </Timeline>
        </Form-item>
      </Form>
      <div id="map1" v-if="patrol"></div>
    </Modal>
  </div>
</template>

<script>
import { ajaxPost } from 'global/axios';
import storage from 'good-storage';
export default {
  data () {
    return {
      urlMsgList: '/sys/userlog/loglist',
      patrolUrlList: '/emergency/patrol/list',
      patrolUrlList2: '/emergency/patrol/mypatrol',
      complaintList: '/bus/record/list',
      patrolFindList: '/emergency/patrol/find',
      msglist: [],
      patrol: false,
      moduleItem: {},
      msgModal: false,
      jinduData: [],
      jinduColumns: [
        {
          title: '时间',
          key: 'date_time',
        },
        {
          title: '过程',
          key: 'overview',
        },
      ],
    };
  },
  methods: {
    getMsg () {
      let params = {
        url: this.urlMsgList,
        token: storage.session.get('token'),
        data: {
          page: 1,
          pageSize: 12,
          order: { date_time: -1 },
          basis: 2,
          searchValue: {
            type: '业务操作',
          },
        },
        success: res => {
          this.msglist = res.data.result.result;
        },
      };
      if (this.types) {
        params.data.pageSize = 20;
        params.data.searchValue.username = storage.session.get('username');
      }
      ajaxPost(params);
    },
    showMsg (row) {
      if (row.target === '签到') {
        return;
      } else if (row.target === '举报') {
        this.getComplaint(row.id);
        this.patrol = false;
      } else if (row.target === '巡查') {
        this.patrol = true;
        this.getTableData(row.id);
      } else {
        this.patrol = false;
      }
      this.msgModal = true;
      this.moduleItem.msg = row.msg;
      this.moduleItem.dep_name = row.location.dep_name;
      this.moduleItem.date_time = row.date_time;
    },
    getComplaint (id) {
      let that = this;
      let params = {
        data: {
          searchValue: {
            report_no: id,
          },
          order: { date_time: 1 },
        },
        url: this.complaintList,
        token: storage.session.get('token'),
        success: res => {
          this.jinduData = res.data.result.result;
        },
      };
      ajaxPost(params);
    },
    getTableData (id) {
      let params = {
        data: {
          searchValue: {
            patrol_no: id,
          },
        },
        token: storage.session.get('token'),
        url: this.patrolUrlList,
        success: res => {
          this.mapModal = true;
          this.showMap(res.data.result.result[0]);
        },
      };
      if (this.types) {
        params.url = this.patrolUrlList2;
      }
      ajaxPost(params);
    },
    showMap (row) {
      let center = new qq.maps.LatLng(row.route[0].lat, row.route[0].lng);
      let map = new qq.maps.Map(document.getElementById('map1'), {
        center,
        zoom: 16,
      });
      let path1 = [];
      for (let i = 0; i < row.route.length; i++) {
        path1.push(new qq.maps.LatLng(row.route[i].lat, row.route[i].lng));
      }
      let polyline = new qq.maps.Polyline({
        path: path1,
        strokeColor: 'FF4040',
        strokeWeight: 2,
        editable: false,
        map,
      });
      let that = this;
      let params = {};
      params.data = {};
      params.data.searchValue = {
        patrol_no: row.patrol_no,
      };
      params.token = storage.session.get('token');
      params.url = this.patrolFindList;
      params.success = function (res) {
        if (res.data.result.reports.length > 0) {
          let html = '';
          res.data.result.reports.map(function (item, index) {
            let marker = new qq.maps.Marker({
              position: new qq.maps.LatLng(item.lat, item.lng),
              map,
            });
            let anchor = new qq.maps.Point(0, 39),
              size = new qq.maps.Size(42, 68),
              origin = new qq.maps.Point(0, 0),
              markerIcon = new qq.maps.MarkerImage(
                '../../../static/img/weizhi.png',
                size,
                origin,
                anchor
              );
            marker.setIcon(markerIcon);
            let info = new qq.maps.InfoWindow({
              map,
            });
            for (let i = 0; i < item.photos.length; i++) {
              html += `<img style="max-width:200px;max-height:200px;margin-right:5px;" src="${item.photos[i]}">`;
            }
            qq.maps.event.addListener(marker, 'click', function () {
              info.open();
              info.setContent(
                `<div class="bigModal"><p>${item.report_time}</p><p>${item.overview}</p><div class="img">${html}</div></div>`
              );
              setTimeout(function () {
                $('.smallImg').bind('click', function (event) {
                  that.showImg($(this).attr('src'));
                });
              }, 100);

              info.setPosition(new qq.maps.LatLng(item.lat, item.lng));
            });
          });
        }
        if (res.data.result.scenerys.length > 0) {
          res.data.result.scenerys.map(item => {
            let html = '';
            let marker = new qq.maps.Marker({
              position: new qq.maps.LatLng(item.lat, item.lng),
              map,
            });
            let anchor = new qq.maps.Point(0, 39),
              size = new qq.maps.Size(42, 68),
              origin = new qq.maps.Point(0, 0),
              markerIcon = new qq.maps.MarkerImage(
                '../../../static/img/gis1.png',
                size,
                origin,
                anchor
              );
            marker.setIcon(markerIcon);
            let info = new qq.maps.InfoWindow({
              map,
            });
            html += `<img style="max-width:500px;max-height:280px;margin-right:5px;" src="${item.photo}">`;
            qq.maps.event.addListener(marker, 'click', function () {
              info.open();
              info.setContent(
                `<div class="bigModal1"><p>${item.date_time}</p><div class="img">${html}</div></div>`
              );
              setTimeout(function () {
                $('.smallImg').bind('click', function (event) {
                  that.showImg($(this).attr('src'));
                });
              }, 100);

              info.setPosition(new qq.maps.LatLng(item.lat, item.lng));
            });
          });
        }
      };
      ajaxPost(params);
    },
  },
  props: {
    types: {
      type: Boolean,
      default: true,
    },
  },
  mounted () {
    this.getMsg();
  },
};
</script>

